1 files changed, 32 insertions, 0 deletions
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
new file mode 100644
index 0000000..7c82c17
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionData.tsx
@@ -0,0 +1,32 @@
+import { Box, Column, Label, Row, Text } from '@umami/react-zen';
+import { Empty } from '@/components/common/Empty';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { useSessionDataQuery } from '@/components/hooks';
+import { DATA_TYPES } from '@/lib/constants';
+
+export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
+  const { data, isLoading, error } = useSessionDataQuery(websiteId, sessionId);
+
+  return (
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
+      {!data?.length && <Empty />}
+      <Column gap="6">
+        {data?.map(({ dataKey, dataType, stringValue }) => {
+          return (
+            <Column key={dataKey}>
+              <Label>{dataKey}</Label>
+              <Row alignItems="center" gap>
+                <Text>{stringValue}</Text>
+                <Box paddingY="1" paddingX="2" border borderRadius borderColor="5">
+                  <Text color="muted" size="1">
+                    {DATA_TYPES[dataType]}
+                  </Text>
+                </Box>
+              </Row>
+            </Column>
+          );
+        })}
+      </Column>
+    </LoadingPanel>
+  );
+}